<template>
    <div style="margin-top: -10px">
        <navbar class="navbarBox" select="2" />
        <!-- <el-image src="" fit="fill" style="width: 40px; height: 40px;border-radius: 40px;"></el-image> -->
        <img alt src="@/assets/about/bj2.png" style="height:300px;width:100%" />
        <div class="main">
            <div class="width-30b mt-50">
                <el-form :model="form" label-width="85px">
                    <el-form-item label="账号">
                        <el-input placeholder="请输入账号" v-model="form.account"></el-input>
                    </el-form-item>

                    <el-form-item label="确认账号">
                        <el-input placeholder="请再次输入确认账号" v-model="form.re_account"></el-input>
                    </el-form-item>
                    <el-form-item label="确认手机号">
                        <el-input placeholder="请输入手机号" type="number" v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="充值金额">
                        <el-input placeholder="请输入充值金额" type="number" v-model="form.money"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-select placeholder="请选择支付方式" style="width:474px" v-model="form.payment">
                            <el-option :key="item.value" :label="item.label" :value="item.value"
                                v-for="item in options"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div style="display: flex; justify-content: center;">
                    <el-button :style="{ background: $store.state.personality }" @click="submitForm()" class="submitForm"
                        style="width:300px">确认充值</el-button>
                </div>
            </div>
        </div>



        <!-- 实名认证 -->
        <el-dialog :title="title" :visible.sync="visible" width="700px">
            <div style="text-align: center;margin-bottom: 50px;">
                <img src="@/assets/sm.png" alt="" srcset="">
            </div>
        </el-dialog>
        <bottom class="bottomBox2"></bottom>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                payment: 'alipay',
                account: "",
                re_account: "",
                phone: "",
                money: ""
            },
            visible: false,
            options: [
                {
                    value: 'alipay',
                    label: '支付宝',
                },
                {
                    value: 'wechat',
                    label: '微信',
                },
                {
                    value: 'bank_card',
                    label: '银行卡',
                },
            ],
        }
    },
    methods: {
        submitForm() {
            if (!(this.form.account && this.form.re_account && this.form.phone && this.form.money)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                return
            }

            if (this.form.account != this.form.re_account) {
                this.$message.error('账号输入不一致')
                return
            }

            this.visible = true


        },
    },
}
</script>

<style scoped>
.main {
    display: flex;
    justify-content: center;
    padding-bottom: 100px;
    /* margin-top: 200px; */
}
</style>